<template>
    <div class="order-container">
        <div class="search-container">
            <div class="top">
                <div class="top-left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div class="top-right">
                    <!-- 重置  查询搜索 按钮 -->
                    <el-button type="info" @click="restKeyWord">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="bottom">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px">
                    <el-form-item label="输入搜索:">
                        <el-input v-model="formInline.orderSn" placeholder="订单编号" clearable />
                    </el-form-item>
                    <el-form-item label="收货人:">
                        <el-input v-model="formInline.receiverKeyword" placeholder="收货人姓名/手机号码" clearable />
                    </el-form-item>
                    <el-form-item label="提交时间:">
                        <el-date-picker v-model="formInline.createTime" type="date" placeholder="请选择时间" clearable />
                    </el-form-item>
                    <el-form-item label="订单状态:">
                        <el-select v-model="formInline.status" placeholder="全部" clearable>
                            <el-option label="待付款" value="0" />
                            <el-option label="待发货" value="1" />
                            <el-option label="已发货" value="2" />
                            <el-option label="已完成" value="3" />
                            <el-option label="已关闭" value="4" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="订单分类:">
                        <el-select v-model="formInline.orderType" placeholder="全部" clearable>
                            <el-option label="正常订单" value="0" />
                            <el-option label="秒杀订单" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单来源:">
                        <el-select v-model="formInline.sourceType" placeholder="全部" clearable>
                            <el-option label="PC订单" value="0" />
                            <el-option label="APP订单" value="1" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 数据列表 -->
        <div class="list-container">
            <div class="left">
                <el-icon size="18">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
        </div>
        <!-- table表格 -->
        <div class="table">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"  border> <el-table-column type="selection"
                    width="55" />
                <el-table-column prop="id" label="编号" width="80" align="center" />
                <el-table-column prop="orderSn" label="订单编号" align="center" width="180" />
                <el-table-column prop="createTime" label="提交时间" align="center" width="180">
                    <template #default="{ row }">
                        {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="memberUsername" label="用户账号" width="430px" align="center" />
                <el-table-column prop="totalAmount" label="订单金额" align="center" width="130" />
                <el-table-column label="支付方式" width="130">
                    <template #default="{ row }">
                        {{ paymentMethod(row.payType) }}
                    </template>
                </el-table-column>
                <el-table-column label="订单来源" width="130">
                    <template #default="{ row }">
                        {{ orderSource(row.sourceType) }}
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="130" align="center">
                    <template #default="{ row }">
                        {{ status(row.status) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-button plain @click="formInlineId(row.id)">查看订单</el-button>
                        <el-button plain @click="closeOrder(row.id)" v-if="row.status == 0 ? true : false">关闭订单</el-button>
                        <el-button type="danger" v-if="row.status == 4 ? true : false"
                            @click="deleteOrder(row.id)">删除订单</el-button>
                        <el-button type="primary" v-if="row.status == 2 ? true : false"
                            @click="dialogTableVisible = true">订单跟踪</el-button>
                        <el-button type="primary" v-if="row.status == 3 ? true : false"
                            @click="dialogTableVisible = true">订单跟踪</el-button>
                        <el-button type="primary" v-if="row.status == 1 ? true : false">订单发货</el-button>
                        <div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 批量操作  删除订单 -->
        <div class="batchoperation">
            <div class="bot-left">
                <el-select placeholder="批量操作" clearable>
                    <el-option label="批量发货" value="1" />
                    <el-option label="关闭订单" value="2" />
                    <el-option label="删除订单" value="3" />
                </el-select>
                <el-button type="primary" @click="deleteOrderS">确定</el-button>
            </div>
            <!-- 分页器 组件 -->
            <div class="pagination-box">
                <!-- <div class="bot-left">
                    <el-select placeholder="批量删除" clearable>
                        <el-option label="批量删除" value="3" />
                    </el-select>
                    <el-button type="primary">确定</el-button>
                </div> -->
                <div>
                    <el-pagination v-model:current-page="paginationParams.currentPage"
                        v-model:page-size="paginationParams.pageSize" :page-sizes="[5, 10, 15]"
                        layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total" :background="true"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="订单跟踪" style="padding-bottom: 20px; width: 770px;">
        <!-- 订单跟踪  -->
        <div style="height: 350px; width: 450px;">
            <el-steps direction="vertical" :active="6" finish-status="success">
                <el-step title="订单已提交,等待付款" description="2017-04-01 12:00:00" />
                <el-step title="订单付款成功" description="2017-04-01 12:00:00" />
                <el-step title="在北京市进行下级地点扫描，等待付款" description="2017-04-01 12:00:00" />
                <el-step title="在分拨中心广东深圳公司进行卸车扫描，等待付款" description="2017-04-01 12:00:00" />
                <el-step title="在广东深圳公司进行发出扫描" description="2017-04-01 12:00:00" />
                <el-step title="到达目的地网点广东深圳公司，快件将很快进行派送" description="2017-04-01 12:00:00" />
                <el-step title="订单已签收，期待再次为您服务" description="2017-04-01 12:00:00" />
            </el-steps>
        </div>
    </el-dialog>

    <div>
        <el-dialog v-model="dialogTableVisible2" title="关闭订单">
            <span>操作备注：</span> <el-input v-model="textarea.value" :rows="2" type="textarea" placeholder="请输入内容" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogTableVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="confirm(idd, textarea.value)">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import * as http from '@/request/http'
import { dayjs } from 'element-plus';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const routers = useRouter();
const dialogTableVisible = ref(false)
const dialogTableVisible2 = ref(false)
// 关闭订单操作备注：
const textarea = reactive({
    value: ''
})
// 
const formInline = reactive({
    orderSn: '',
    receiverKeyword: '',
    createTime: '',
    status: '',
    orderType: '',
    sourceType: '',
})




// 批量关闭id
const idd = ref();

// http.order.orderDelete([13]).then(res => {
//     console.log(res);
// })

// 关闭订单
const closeOrder = (id: number) => {
    dialogTableVisible2.value = true
    idd.value = id
}

// 确认关闭
const confirm = (id: number, textarea: string) => {
    console.log(textarea);
    console.log(id);
    http.order.updateClose(id, textarea).then(res => {
        if (res.code == 200) {
            queryList();
            ElMessage.success("修改成功")
        }
    })
    dialogTableVisible2.value = false
}

// 删除订单
const deleteOrder = (id: number) => {
    let ids = [id]
    ElMessageBox.confirm('是否要进行该删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
            http.order.orderDelete(ids).then(res => {
                if (res.code == 200) {
                    queryList();
                    ElMessage.success("删除成功")
                }
            })
        })
        .catch(() => { })
}

const deleteOrderS = () => {
    console.log('');

}


// 支付方式PaymentMethod
const paymentMethod = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const paymentMethod = ['未支付', '支付宝', '微信'];
    return paymentMethod[number] || '未知状态';
}

// 订单来源
const orderSource = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const orderSource = ['PC订单', 'APP订单'];
    return orderSource[number] || '未知状态';
}

//  status 订单状态
const status = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const status = ['待付款', '待发货', '已发货', '已完成', '已关闭', '无效订单'];
    return status[number] || '未知状态';
}

const tableData = ref<any>([]);


// 点击查看跳转到订单详情
const formInlineId = (val: number) => {
    routers.push({ path: 'orderDetail', query: { id: val } })
}

// 分页器相关参数
const paginationParams = reactive({
    currentPage: 1,
    pageSize: 5,
    total: 100,
});

// 提取查询数据的方法(获取表格数据和搜索框用的都是同一个请求接口)
const queryList = () => {
    http.order.orderList({
        pageNum: paginationParams.currentPage,
        pageSize: paginationParams.pageSize,
        // formInline
        orderSn: formInline.orderSn,
        receiverKeyword: formInline.receiverKeyword,
        createTime: formInline.createTime,
        status: formInline.status,
        orderType: formInline.orderType,
        sourceType: formInline.sourceType
    }).then((res) => {
        tableData.value = res.data.list;
        paginationParams.total = res.data.total;
    });
};




// 发送请求 获取数据
queryList();

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
    console.log(`页容量发生变化 : ${val}`);
    // 重新请求    更新数据
    queryList();
};
// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
    console.log(`当前页发生变化 : ${val}`);
    // 重新请求  更新数据
    queryList();
};



// 点击 重置(清空) 搜索框
const restKeyWord = () => {
    formInline.orderSn = '',
        formInline.receiverKeyword = '',
        formInline.createTime = '',
        formInline.status = '',
        formInline.orderType = ''
    formInline.sourceType = ''
}



</script>

<style scoped lang="less">
// /* 搜索框 */
.search-container {
    padding: 20px;
    // box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border: 1px solid #ebeef5;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
        display: flex;
        justify-content: space-between;

        .top-left {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }
}

.list-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px 0;
    // box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .left {
        display: flex;
        align-items: center;

        span {
            margin-left: 10px;
        }
    }
}

.batchoperation {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .el-select {
        margin-right: 20px;
    }
}
</style>